<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		
		<style type="text/css">
			*{
				margin: 0px ;
				padding: 0px;
			}
			.box{
				width: 1226px;
				height: 460px;
				position: relative;
				border: 5px solid red;
				overflow: hidden;
				margin: 0px auto;
			}
			.imgbox{
				width: 6130px;
				height: 460px;
				position: absolute;
				top: 0px;
				left: 0px;
			}
			.imgbox img{
				width: 1226px;
				height: 460px;
				float: left;
			}
			ul{
				width: 200px;
				height: 50px;
				position: absolute;
				bottom: 20px;
				right: 0px;
			}
			ul li{
				width: 30px;
				height: 30px;
				margin-right: 20px;
				border-radius: 50%;
				background: grey;
				float: left;
				list-style: none;
			}
			a{
				display: block;
				width: 50px;
				height: 100px;
				background: rgba(0,0,0,0.5);
				position: absolute;
				top: 50%;
				margin-top: -50px;
				text-align: center;
				text-decoration: none;
				color: #fff;
				line-height: 100px;
				font-size: 30px;
				z-index: 99;
			}
			.left{
				left: 0px;
			}
			.right{
				right: 0px;
			}
			.active{
				background: red;
			}
		</style>
		
		<script type="text/javascript">
			
			$(function(){
				
				var cc = $('img').first().clone()
				$('.imgbox').append(cc)
				
//				定义一个总管变量
				var num=0;
				
				function run(){
//					变量自增
					num++;
//					判断
					if(num>4){
//						当到达最后一张图时  让他书剑跳到第一张图上
						$('.imgbox').css('left','0px');
						
//						让他滑到第二张图上
						num=1;
					}
					if(num==4){
						$('ul li').eq(0).addClass('active').siblings().removeClass('active')
					}
					$('.imgbox').stop().animate({'left':-1226*num+'px'},300)
					$('ul li').eq(num).addClass('active').siblings().removeClass('active')
				}
//				设置定时器
				var timer = setInterval(run,2000)
				
				
				$('.box').hover(function(){
//					清理定时器
					clearInterval(timer)
				},function(){
//					恢复定时器
					timer = setInterval(run,2000)
				})
				
//				点击事件
				$('.right').click(function(){
					run()
				})
				$('.left').click(function(){
					//					变量自增
					num--;
//					判断
					if(num<0){
//						当到达最后一张图时  让他书剑跳到第一张图上
						$('.imgbox').css('left',-1226*4+'px');
						
//						让他滑到第二张图上
						num=3;
					}
//					if(num4){
//						$('ul li').eq(0).addClass('active').siblings().removeClass('active')
//					}
					$('.imgbox').stop().animate({'left':-1226*num+'px'},300)
					$('ul li').eq(num).addClass('active').siblings().removeClass('active')
				})
				
				$('ul li').click(function(){
//					获取当前元素的序号
					num = $(this).index()
					$('.imgbox').stop().animate({'left':-1226*num+'px'},300)
					$('ul li').eq(num).addClass('active').siblings().removeClass('active')
				})
				
			})
		</script>
	</head>
	<body>
		
		<div class="box">
			<a href="javascript:;" class="left"> < </a>
			<a href="javascript:;" class="right"> > </a>
			<div class="imgbox">
				<img src="img/m1.jpg"/>
				<img src="img/m2.jpg"/>
				<img src="img/m3.jpg"/>
				<img src="img/m4.jpg"/>
			</div>
			<ul>
				<li class="active"></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		
	</body>
</html>
